<template>
    <div class="a">
        菜单名称<input type="text" placeholder="请输入菜单名称">
        状态<el-select placeholder="用户状态" style="width: 200px; height: 30px; margin-left: 5px;">
            <el-option label="正常" value="1"></el-option>
            <el-option label="禁用" value="2"></el-option>
        </el-select>
        <el-button type="primary">搜索</el-button>
    </div>
    <div class="b">
        <!-- 新增，展开/折叠按钮 -->
        <el-button type="primary" plain @click="toInsert">+新增</el-button>
        <el-button type="info" plain>展开/折叠</el-button>
    </div>
    <div class="c">
        <el-table :data="tableData" :tree-props="treeProps" row-key="id" default-expand-all>
            <el-table-column prop="menuname" label="菜单名称" width="180" />
            <el-table-column prop="icon" label="图标" width="180"/>
            <el-table-column prop="menu_code" label="权限标识" width="240"/>
            <el-table-column prop="commponent" label="组件路径" width="240"/>
            <!-- 状态（正常/禁用） -->
            <el-table-column label="状态" width="180">
                <template #default="scope">
                    <el-tag v-if="scope.row.id === 1" type="success">正常</el-tag>
                    <el-tag v-else type="danger">禁用</el-tag>
                </template>
            </el-table-column>
            <el-table-column property="createtime" label="创建时间" width="300"/>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="toUpdate">编辑</el-button>
                    <el-button type="danger" size="small" @click="toDelete">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 新增弹窗 -->
     <el-dialog title="新增" v-model="isvisible" width="600px" @click="toInsert">
        <Insert></Insert>
    </el-dialog>
    <el-dialog title="修改" v-model="isvisibleUpdate" width="600px" @click="toUpdate">
        <Update :data="data"></Update>
    </el-dialog>
</template>

<script setup>
import { reactive } from 'vue'
import {ref} from 'vue'
import Insert from './insert.vue'
import Update from './update.vue'

let data = ref({})

// 显示新增弹窗（默认不显示）
let isvisible = ref(false)

// 显示修改弹窗（默认不显示）
let isvisibleUpdate = ref(false)
let toInsert = () => {
    isvisible.value = true   
}

let toUpdate = () => {
    isvisibleUpdate.value = true
}
// 删除
let toDelete = (id) => {
    
}
const treeProps = reactive({
    checkStrictly: false,
})


const tableData = [
    {
        menuname: '系统管理',
        icon: 'Setting',
        menu_code: 'system',
        commponent: 'index',
        createtime: '2020-07-01 09:09:09',
        children: [
            {
                menuname: '用户管理',
                icon: 'el-icon-user-solid',
                menu_code: '/system/user',
                commponent: '/system/user',
                createtime: '2020-07-01 09:09:09'
            },
            {
                menuname: '角色管理',
                icon: 'el-icon-s-custom',
                menu_code: '/system/role',
                commponent: '/system/role',
                createtime: '2020-07-01 09:09:09'
            },
        ],
    }
]
</script>

<style scoped>
input {
    width: 200px;
    margin: 0 10px;
    height: 30px;
    border: 1px solid #ccc;
}

.a {
    margin-left: 20px;
    margin-top: 10px;
    font-size: 14px;
}

.a input {
    width: 200px;
    height: 30px;
    border: 1px solid #ccc;
    margin: 0 10px;

}

.a button {
    margin-left: 20px;
}

.b {
    margin-left: 20px;
    margin-top: 20px;
}
.c {
    margin-left: 20px;
    margin-top: 20px;
}
</style>
